﻿<!doctype html>
<html lang="en">

<head>

    <!--====== Required meta tags ======-->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--====== Title ======-->
    <title>HaFood</title>

    <!-- ====== Bootstrap css ====== -->
    <link rel="stylesheet" href="/static/index/css/bootstrap.min.css">

    <!--====== Pe Icon 7 Stroke css ======-->
    <link rel="stylesheet" href="/static/index/css/Pe-icon-7-stroke.css">

    <!--====== Ion Icons css ======-->
    <link rel="stylesheet" href="/static/index/css/ionicons.min.css">

    <!--====== Magnific Popup css ======-->
    <link rel="stylesheet" href="/static/index/css/magnific-popup.css">

    <!--====== Slick css ======-->
    <link rel="stylesheet" href="/static/index/css/slick.css">

    <!--====== Animate css ======-->
    <link rel="stylesheet" href="/static/index/css/animate.min.css">

    <!--====== Nice Select css ======-->
    <link rel="stylesheet" href="/static/index/css/nice-select.css">

    <!--====== Default css ======-->
    <link rel="stylesheet" href="/static/index/css/default.css">

    <!--====== Style css ======-->
    <link rel="stylesheet" href="/static/index/css/style.css">


</head>

<body>

<!--====== PRELOADER  PART START ======-->

<div id="preloader">
    <div id="loader">
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
</div>

<!--====== PRELOADER  PART ENDS ======-->

<!--====== SEARCH PART START ======-->

<div class="search-box">
    <div class="search-header">
        <div class="container mt-60">
            <div class="row">
                <div class="col-6">
                    <h5 class="search-title">Search</h5> <!-- search title -->
                </div>
                <div class="col-6">
                    <div class="search-close text-right">
                        <button class="search-close-btn">Close <span></span><span></span></button>
                    </div> <!-- search close -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </div> <!-- search header -->
    <div class="search-body">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="search-form">
                        <form action="#">
                            <input type="text" placeholder="Search for Products">
                            <button><i class="flaticon-search"></i></button>
                        </form>
                    </div>
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </div> <!-- search body -->
</div>

<!--====== SEARCH PART ENDS ======-->

<!--====== SHOPPING CART PART START ======-->

<div class="shopping-cart-wrapper">
    <div class="shopping-cart-canvas">
        <div class="shopping_cart">
            <div class="shopping_cart-top-bar d-flex justify-content-between">
                <h6>Shopping Cart</h6>
                <button class="shopping-cart-close">
                    <i class="ion ion-md-add"></i>
                </button>
            </div><!-- shopping cart top bar -->
            <div class="shopping_cart-list-items mt-30">
                <ul>
                    {% if user.car %}
                        {% for foo in user.car %}
                            <li>
                                <div class="single-shopping-cart media">
                                    {#                                    <div class="cart-image">#}
                                    {#                                        <img src="/static/index/images/cart-1.jpg" alt="Cart">#}
                                    {#                                    </div>#}
                                    <div class="cart-content media-body pl-15">
                                        <h6><a href="#">{{ foo.com_name }}</a></h6>
                                        <span class="quality">QTY: 01</span>
                                        <span class="price">${{ foo.com_price }} x {{ foo.id | get_count_and_prices }}</span>
                                        <a class="remove" href="#"><i class="fal fa-times"></i></a>
                                    </div>
                                </div> <!-- single shopping cart -->
                            </li>
                        {% endfor %}
                    {% endif %}
                </ul>
            </div> <!-- shopping_cart list items -->
            <div class="shopping_cart-btn">
                <div class="total pt-35 d-flex justify-content-between">
                    <h5>Subtotal:</h5>
                    {% if user.car %}
                        <p>${{ user.car | total_price("") }}</p>
                    {% endif %}
                </div>
                <div class="cart-btn pt-25">
                    <a class="main-btn" href="com_car.html">查看购物车</a>
                    <a class="main-btn main-btn-2" href="checkout.html">立即结算</a>
                </div>
            </div>
        </div> <!-- shopping_cart -->
    </div>
    <div class="overlay"></div>
</div>

<!--====== SHOPPING CART PART ENDS ======-->


<!--====== HEADER  PART START ======-->

<header class="header-area">
    <div class="navigation navigation-2 navigation-page fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <nav class="navbar navbar-expand-lg">
                        <a class="navbar-brand" href="index.html">
                            <img src="/static/index/images/logo.png" alt="Logo">
                        </a> <!-- Logo -->

                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                        </button> <!-- navbar-toggler -->

                        <div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                                <li class="nav-item"><a href="index.html">主页</a></li>

                                <li class="nav-item"><a href="product-grid.html">全部商品</a></li>
                                <li class="nav-item"><a class="page-scroll" href="#">最新活动</a></li>
                                <li class="nav-item"><a class="page-scroll" href="#">会员俱乐部</a></li>
                                {% if user %}
                                    <li class="nav-item"><a class="page-scroll" href="order.html">{{ user.nick_name }}的订单</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </div> <!-- navbar collapse -->
                        <div class="navbar-icon d-none d-sm-block">
                            <ul>
                                <li><a class="search-open" href="#"><i class="pe-7s-search"></i></a></li>
                                <li><a class="shopping-cart-open" href="#"><i class="pe-7s-cart"></i></a></li>
                                <li><a class="" href="user.html" style="width: auto ; height: auto"><i
                                        class="pe-7s-user"></i>欢迎您,{{ user.nick_name }}<i class=""></i></a></li>
                                <li><a href="/logout">退出</a></li>
                            </ul>
                        </div>
                    </nav> <!-- navbar -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </div> <!-- navigation -->
</header>

<!--====== HEADER  PART ENDS ======-->

<!--====== PAGE TITLE  PART START ======-->

<section class="page-title-area d-flex align-items-center bg_cover"
         style="background-image: url(/static/index/images/page-title-bg.jpg)">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-title-item text-center">
                    <h3 class="title">订单提交</h3>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">主页</a></li>
                            <li class="breadcrumb-item active" aria-current="page">订单提交</li>
                        </ol>
                    </nav>
                </div> <!-- page title item -->
            </div>
        </div> <!-- row -->
    </div> <!-- row -->
    <div class="page-title-shape">
        <img src="/static/index/images/banner-shape.png" alt="shape">
    </div> <!-- page title shape -->
</section>
<div class="page-content">

    <section class="checkout-page">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 col-md-12">
                    <div class="checkout-form box-shadow white-bg">
                        <h4 class="mb-4 font-w-6">Billing Details</h4>
                        <form class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>你的名字</label>
                                    <input type="text" id="fname" class="form-control" placeholder="你的名字">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>你的称呼</label>
                                    <input type="text" id="lname" class="form-control" placeholder="你希望我们怎么称呼您">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>手机号</label>
                                    <input type="text" id="phone" class="form-control" placeholder="输入你的联系方式">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>微信？？</label>
                                    <input type="text" id="companyname" class="form-control" placeholder="可以给我你的微信吗？">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>*你喜欢我吗</label>
                                    <select name="people" id="people" class="form-control">
                                        <option value="#">喜欢</option>
                                        <option value="#">喜欢</option>
                                        <option value="#">喜欢</option>
                                        <option value="#">喜欢</option>
                                        <option value="#">喜欢</option>
                                        <option value="#">喜欢</option>
                                    </select>
                                </div>

                            </div>

                        </form>


                        <form>

                            <div class="col-md-12">
                                <div>
                                    <label>地址</label>

                                    <div class="col-md-6">

                                        <select id="sel_p">
                                            {% for p in province %}
                                                <option c_id={{ p.c_id }} class="pcc"
                                                        value="{{ p.c_id }}">{{ p.addr_name }}</option>
                                            {% endfor %}


                                        </select>

                                        <label>省/国家</label>
                                    </div>

                                    <div class="col-md-6">

                                        <select id="sel_c">
                                        </select>
                                        <label>市</label>
                                    </div>

                                    <div class="col-md-6">

                                        <select id="sel_a"></select>
                                        <label>县/区</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input type="text" id="address2" class="form-control" placeholder="具体地址？？？">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-md-0">
                                    <label>邮政编码</label>
                                    <input type="text" id="zippostalcode" class="form-control"
                                           placeholder="Zip / Postal">
                                </div>
                            </div>


                        </form>

                        <h3>自动填充地址</h3>
                        <button onclick="get_addr(1)">地址1</button>
                        <button onclick="get_addr(2)">地址2</button>
                        <button onclick="get_addr(3)">地址3</button>


                    </div>
                </div>
                <div class="col-lg-5 col-md-12 mt-5 mt-lg-0">
                    <div class="border bg-light-4 p-3 p-lg-5">
                        <div class="mb-7">
                            <h6 class="mb-3 font-w-6">Your Order</h6>
                            <ul class="list-unstyled">
                                {% for foo in user.car %}
                                    <li class="mb-3 border-bottom pb-3 d-flex"><span
                                            class="mr-auto"> {{ foo.com_name }} </span>
                                        <span>${{ foo.com_price }} x {{ foo.id | get_count_and_prices }}</span></li>

                                {% endfor %}

                                {#                    <li class="mb-3 border-bottom pb-3 d-flex"><span class="mr-auto"> 1 x Unpaired Running Shoes </span> <span>$952.00</span></li>#}
                                <li class="mb-3 border-bottom pb-3 d-flex"><span class="mr-auto"> Shipping </span>
                                    <span>$99.00</span></li>
                                {#                    <li class="mb-3 border-bottom pb-3 d-flex"><span class="mr-auto"> Subtotal </span> <span>$2399.00</span></li>#}
                                <li class="d-flex"><span class="mr-auto"><strong
                                        class="cart-total"> Total :</strong></span> <strong
                                        class="cart-total">${{ user.car | total_price(99) }}.00 </strong>
                                </li>
                            </ul>
                        </div>
                        <div class="cart-detail my-5">
                            <h6 class="mb-3 font-w-6">支付方式</h6>
                            <div class="form-group">
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="customRadio1" name="customRadio"
                                           class="custom-control-input">
                                    <label class="custom-control-label" for="customRadio1">银行转账</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="customRadio2" name="customRadio"
                                           class="custom-control-input">
                                    <label class="custom-control-label" for="customRadio2">支付宝支付</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="customRadio3" name="customRadio"
                                           class="custom-control-input">
                                    <label class="custom-control-label" for="customRadio3">微信支付</label>
                                </div>
                            </div>
                            <div class="form-group mb-0">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="customCheck1">
                                    <label class="custom-control-label" for="customCheck1">我已阅读并接受条款和条件</label>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-animated btn-block" id="commit">继续付款</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>


<section class="footer-area gray-bg pt-60 pb-85">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-5">
                <div class="footer-item-1 mt-30">
                    <a href="index.html"><img src="/static/index/images/logo-2.png" alt="logo"></a>
                    <span>Copyright &copy; 2019.Company name All rights reserved.<a target="_blank"
                                                                                    href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></span>
                    <ul>
                        <li><a href="#">Quality policy</a></li>
                        <li><a href="#">Customer Policy </a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                    <div class="footer-info">
                        <ul>
                            <li><i class="ion ion-md-pin"></i> 123 New Design Str, ABC Building, <br> Melbourne,
                                Australia
                            </li>
                            <li><i class="ion ion-ios-mail"></i>example@gmail.com</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 offset-lg-2 col-md-2 col-sm-4">
                <div class="footer-social mt-30">
                    <h5 class="title">Social Links</h5>
                    <ul>
                        <li><a href="https://www.facebook.com/info.tanver">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Instagram</a></li>
                        <li><a href="skype:live:taherul.islam_1">Skype</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4 col-md-5 col-sm-8">
                <div class="footer-item-2 mt-30">
                    <h5 class="title">Newsletters</h5>
                    <form action="#">
                        <div class="input-box mt-25">
                            <input type="email" placeholder="Your email">
                        </div>
                        <div class="input-box mt-25">
                            <button class="main-btn">Submit <i class="ion ion-ios-send"></i></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!--====== FOOTER PART ENDS ======-->

<!--====== BACK TO TOP ======-->
<div class="back-to-top">
    <a href="">
        <i class="ion ion-md-arrow-up"></i>
    </a>
</div>
<!--====== BACK TO TOP ======-->


<!--====== jquery js ======-->
<script src="/static/index/js/vendor/modernizr-3.6.0.min.js"></script>
<script src="/static/index/js/vendor/jquery-1.12.4.min.js"></script>

<!--====== Bootstrap js ======-->
<script src="/static/index/js/bootstrap.min.js"></script>
<script src="/static/index/js/popper.min.js"></script>

<!--====== Slick js ======-->
<script src="/static/index/js/slick.min.js"></script>

<!--====== Isotope js ======-->
<script src="/static/index/js/isotope.pkgd.min.js"></script>

<!--====== Images Loaded js ======-->
<script src="/static/index/js/imagesloaded.pkgd.min.js"></script>

<!--====== Magnific Popup js ======-->
<script src="/static/index/js/jquery.magnific-popup.min.js"></script>

<!--====== Nice Select js ======-->
{#<script src="/static/index/js/jquery.nice-select.min.js"></script>#}

<!--====== Ajax Contact js ======-->
<script src="/static/index/js/ajax-contact.js"></script>

<!--====== Main js ======-->
<script src="/static/index/js/main.js"></script>

</body>

<script>
    function get_addr(num) {

        $.ajax({
            url: "/get_addr",
            type: "get",
            data: {"par": num}
        }).success(function (resp) {

            if (resp.errno == "102") {
                alert(resp.errmsg)
                return 0;
            }
            $("#fname").attr("value", resp.name);
            $("#lname").attr("value", resp.call);
            $("#phone").attr("value", resp.phone);
            $("#address2").attr("value", resp.definite);

            var p = $("#sel_p option");

            console.log(p)


        })

    }

    $("#sel_p").click(function () {

        // 获取c_id
        var c_id = $(this).val()
        //获取c_id对应的城市

        $.ajax({
            url: '/get_city',
            type: "post",
            data: {c_id: c_id}
        }).success(function (resp) {

            $("#sel_c").html("")

            $.each(resp, function (k, v) {

                ret = "<option value=" + k + ">" + v + "</option>"
                $("#sel_c").html($("#sel_c").html() + ret)

            })


        })


    })


    $("#sel_c").click(function () {

        // 获取c_id
        var c_id = $(this).val()
        //获取c_id对应的城市

        $.ajax({
            url: '/get_city',
            type: "post",
            data: {c_id: c_id}
        }).success(function (resp) {

            $("#sel_a").html("")

            $.each(resp, function (k, v) {

                ret = "<option value=" + k + ">" + v + "</option>"

                $("#sel_a").html($("#sel_a").html() + ret)

            })


        })


    })


    $("#commit").click(function () {

        // 获取支付方式
        var ret = $("input[name=customRadio]")
        var pay_type = false
        for (var i = 0; i < ret.length; i++) {

            if (ret[i].checked) {
                pay_type = i
            }
        }
        if (!pay_type) {
            alert("选择支付方式")
            return 0;
        }

        // 获取是否勾选协议
        var ret2 = $("#customCheck1")

        if (!ret2[0].checked) {
            alert("请勾选我已阅读并接受条款和条件")
            return 0;
        }

        var name = $("#fname").val();
        if (!name) {
            alert("不能没有名字");
            return 0;
        }
        var call = $("#lname").val();
        var phone = $("#phone").val()
        if (!phone) {
            alert("没有手机号怎么联系你");
            return 0;
        }
        var wx = $("#companyname").val();
        // 地址
        var p_id = $("#sel_p").val()
        var c_id = $("#sel_c").val()
        var a_id = $("#sel_a").val()

        var p_addr = $("option[value=" + p_id + "]").html()
        var c_addr = $("option[value=" + c_id + "]").html()
        var a_addr = $("option[value=" + a_id + "]").html()
        var addr = $("#address2").val()

        if (!addr) {
            alert("请输入详细地址")
            return 0;
        }

        prame = {
            name: name,
            call: call,
            phone: phone,
            wx: wx,
            p_addr: p_addr,
            c_addr: c_addr,
            a_addr: a_addr,
            addr: addr
        }

        $.ajax({
            url: "/checkout.html",
            type: "post",
            data: JSON.stringify(prame),
            contentType: "application/json"
        }).success(function (resp) {

            alert(resp.errmsg)
            if (resp.errno) {
                location.href = "/order.html"
            }

        }).error(function () {

            alert("网络错误")

        })


    })


</script>

</html>

